<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/static/css/mini-nord.min.css">
  <link rel="stylesheet" href="/static/iconfont/iconfont.css">
  <title>萌点后台管理系统</title>
  <style>
     *{
      padding: 0;
      margin: 0;
    }
    #header{
      height:56px;
      width: 100%;
      border:1px solid rgba(3,119,165,100);
      background:rgba(3,119,165,100);
      position:fixed;
      z-index: 999;
    }
    #header a{
      color:black;
      text-decoration:none;
    }
    #header a:hover{
      color: #df5621;
    }
    #h2{
      color: white;
    }
    .daohang{
      list-style-type: none;
      margin:0;
      padding:0;
    }
    .daohang li{
      display: block;
      height: 70px;
      text-align:center;
      line-height: 5px;
      color: white;
    }
    .daohang li:hover{
      background-color: white;
      color:rgba(3,119,165,100);
    }
    #left{
      position: fixed;
      top:56px; width:5%; 
      height: 100%; left: 0; 
      background-color:rgba(3,119,165,100)
    }
    #userinfo{
      color:white;
      position: absolute;
      right: 100px;
      top: 20px
    }
    #adminlist {
      position:absolute;
      top:68px;
      width:60%;
      margin-left:160px ;
      width:80%;
    }
    #adminlist th {
      text-align: center;
      padding: 8px;
    }
    #adminlist td {
      text-align: center;
      padding: 0px;
      font-size: 13px;
    }
    button{
      font-size: 10px;
    }
  </style>
</head>
<body>
  <div id='header'>
    <div id='h2'><h2 style='margin-left: 50px;'>萌点后台管理系统</h2></div>
    <div id="userinfo" class="userinfo"></div>
  </div>
  <div>
      <div id='left'>
        <ul class="daohang">
          <li onclick="toHome()">
            <i style="font-size:25px" class='iconfont iconshouye'></i>
            <p style="font-size:10px">首页</p>
          </li>
          <li style='background-color: white;color:rgba(3,119,165,100);'>
            <i style="font-size:25px" class='iconfont iconfaburenwu'></i>
            <p style="font-size:10px">动态</p>
          </li>
          <li onclick="toUser()">
            <i style="font-size:25px" class='iconfont iconyonghu'></i>
            <p style="font-size:10px">用户</p>
          </li>
          <li onclick="toAdmin()">
            <i style="font-size:25px" class='iconfont iconyonghu1'></i>
            <p style="font-size:10px">管理员</p>
          </li>
          <li onclick="toElse()">  
            <i style="font-size:25px" class='iconfont iconguanli'></i>
            <p style="font-size:10px">管理</p>
          </li>
        </ul>
      </div>
      <div id='adminlist'></div>
  </div>
  <script>
    var adminlist=document.getElementById('adminlist')
    //登录判断
    function getToken () {
      return localStorage.getItem('token') || ''
    }
    function getMyInfo () {
      let uinfo = localStorage.getItem('userinfo')
      if (uinfo) {
        try {
          return JSON.parse(uinfo)
        } catch (err) {
          return null
        }
      }
      return null
    }
    function checkLogin() {
      let tk = getToken()
      if (!tk) {
        location.href = '/login'
        return
      }
      let uinfo = getMyInfo()
      if (uinfo === null) {
        location.href = '/login'
      } else {
        //登录超时
        if (uinfo.time + uinfo.expires < Date.now()) {
          localStorage.removeItem('token')
          localStorage.removeItem('userinfo')
          location.href = '/login'
        }
      }
    }
    //检测是否登录并跳转
    checkLogin()
    
    //跳转函数
    function toHome(){
      location.href='/home'
    }
    function toUser(){
        location.href='/user'
    }
    function toElse(){
      location.href='/else'
    }
    function toAdmin(){
      location.href='/admin'
    }
    //fetch封装
    function apicall (path, options = {}) {
      let token = getToken()
      let q = '?'
      if (path.indexOf('?') > 0) {
        q = '&'
      }
      path = `${path}${q}token=${token}`
      return fetch(path, options).then(async res => {
        if (!res.ok) {
          let errtext = await res.text()
          throw new Error(`${res.status} : ${errtext}`)
        } else {
          return res.text()
        }
      })
    }

    //登录用户信息
    function getUserInfo (id) {
      return apicall('/user/admin/'+id).then(d => {
        let uinfo = JSON.parse(d)
        showUserInfo(uinfo)
      })
      .catch(err => {
        alert(err.message)
      })
    }
    function showUserInfo (u) {
      let html = `
        <a style='color:white' href='/manage'>${u.username}</a>
        <a href="javascript:logout(this);">
          退出
        </a>
      `
      document.getElementById('userinfo').innerHTML = html
    }

    //退出登录
    function logout () {
      if (!confirm('确定退出？')) {
        return
      }
      localStorage.removeItem('token')
      localStorage.removeItem('userinfo')
      location.href = '/login'
    }
  
    //得到管理员列表
    function getAdminList () {
      apicall('/user/dongtai').then(d => {
        showAdmins(JSON.parse(d))
      }).catch(err => {
        alert(err.message)
      })
    }
    
    //展示动态列表
    function showAdmins(ulist){
      console.log(ulist)
      var html=`<p>>动态列表</p>
      <table width="100%" id="tb">
        <tr>
          <th>动态ID</th>
          <th>动态内容</th>
          <th>发布地点</th>
          <th>发布者</th>
          <th>发布时间</th>
          <th>操作</th>
        </tr>
        </table>
      `
      adminlist.innerHTML=html;
      var tb=document.getElementById('tb')
      for (let i = 0; i < ulist.length; i++) {
        var tdNode = `<td>${ulist[i].sayid}</td>
          <td>${ulist[i].saycontent}</td>
          <td>${ulist[i].saylocal}</td>
          <td>${ulist[i].userid}</td>
          <td>${ulist[i].saytime}</td>
          <td>
            <button onclick='del(this)'>删除</button>
          </td>`
        var trNode = document.createElement("tr");
        trNode.innerHTML = tdNode;
        tb.appendChild(trNode);
      }
    }
    //删除动态
    function del(that){
      if (!confirm('确定删除？')) {
        return
      }
      var p=that.parentNode.parentNode;
      var id=p.cells[0].innerText
      tb.removeChild(p)

      apicall('/user/dongtai/'+id,{
        method:'DELETE'
      }).then(d => {
        console.log(d)
      }).catch(err => {
        alert(err.message)
      })
    }
   
    window.onload = () => {
      getUserInfo('self')
      getAdminList ()
    }

  </script>
</body>
</html>
